大家在接收別人送的 LINE 禮物的時候應該都有發現收到的訊息是「對方姓名+送禮物來囉!」(還是沒收到過不知道QQ)
如果在姓名我用 hardcode 寫死我的 LINE 名稱，你們在使用這個整人工具的時候就都會出現我的名字了😱 因此為了解決這種困境，就要使用 LINE Login API 搭配 LIFF V2 取得目前登入者的公開資訊，這樣就可以讓你們在整人的時候都顯示自己名稱的訊息了！

LINE Login 流程圖

這是 LINE 官方公布的在外部瀏覽器使用 LINE 登入的流程圖：

我們需要完成以下兩個步驟，其他交給 LINE 就好：

1. 在載入 LIFF SDK 後使用 liff.init()初始化(這是啟動 LIFF 的必備步驟)
2. 使用 liff.login() 方法。在身份驗證頁面和授權畫面處理完成後，會被重導向到 LIFF 應用程式 ( redirectUri)。完成之後就能使用 liff.getProfile() 方法取得目前登入使用者的公開資料。

如何載入 LINE SDK

昨天的網頁架構有提到載入 LINE SDK 的方法，載入 LINE SDK 的方法有兩種：

1. 使用 CDN 路徑 (昨天講的)
2. 使用 npm 套件
   因為我們是直接把網頁程式碼丟到 GitHub 架網站，所以用 CDN 路徑會比較方便，而 CDN 路徑也有分成兩種:

1. CDN edge 路徑(本範例使用!)
   僅指定主要版本的方法。 不用更新您的LIFF app，也可以使用最新版本的LIFF SDK。
   例: https://static.line-scdn.net/liff/edge/2/sdk.js
2. CDN 固定路徑
   可指定至修訂版本的方法。只要未更新 LIFF app，即可繼續使用指定的修訂版本。由於其不會自動更新，故不會受到LIFF SDK 升級的影響。
   例: https://static.line-scdn.net/liff/edge/versions/2.1.13/sdk.js
   載入 SDK 語法:

// CDN edge路徑
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
// CDN 固定路徑
<script src="https://static.line-scdn.net/liff/edge/versions/2.1.13/sdk.js"></script>

如何初始化 LIFF

在啟動 LIFF 之前一定要執行初始化的動作，不然你怎麼呼叫 LINE SDK 都不會有回應喔~
官方的初始化版本：

liff.init({
    liffId: '1234567890-AbcdEfgh', // 我們申請的 liffId
    withLoginOnExternalBrowser: true, // 開始自動登入程序
}).then(() => {
    // Start to use liff's api
});

其實只寫這樣也可以使用，只要有 liffId 即可：

liff.init({ liffId: "1656997750-QLPwGlaN" });

使用 LINE Login API 登入

要注意如果是使用 LIFF 直接在 LINE 瀏覽器裡面打開連結的話，就不用再使用 liff.login() 執行登入，因為在使用 liff.init() 初始化的時候就會自動執行 liff.login() 登入。

• 檢查用戶是否登入

liff.isLoggedIn();

• 在LINE 的瀏覽器或外部瀏覽器執行登入程序

liff.login(loginConfig);

使用 liff.getProfile() 獲得用戶資料

可以獲得的資料是指 LINE 暱稱、LINE 頭貼的圖片位置、狀態消息等...。

• 取得該登入用戶的全部資訊

liff.getProfile();

回傳值:

{
  "userId": "U4af4980629...",
  "displayName": "Brown",
  "pictureUrl": "https://profile.line-scdn.net/abcdefghijklmn",
  "statusMessage": "Hello, LINE!"
}

• 只取得用戶的 LINE 暱稱(displayName)

liff
  .getProfile()
  .then((profile) => {
    const name = profile.displayName;
  })
  .catch((err) => {
    console.log("error", err);
  });